/* eslint react/no-string-refs:0 */
import React, {Component} from 'react';
import {Grid, Input, Button, Select, DatePicker} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import {withRouter, Link} from 'react-router-dom';
import {getStaName, getOuName} from '../../../../api/station'

const {Row, Col} = Grid;

import DataBinder from '@icedesign/data-binder';


//
// @DataBinder({ // todo Databinder 与axios不能一起用
//   RecvDevice: { // SendData 是 key
//     url: '/api/getDevice',
//     method: 'post',
//     data: {       // todo 发送参数的格式
//     },
//     defaultBindingData: { // todo 这里是 接口返回数据的格式
//       status: 200,
//       statusText: 'ok',
//       data: []
//     }
//   }
// })
@withRouter
export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    console.log(props.ouName)

    this.state = {
      value: {},
      devResult: [],
      ps: getStaName({ouName: []}),
      po: getOuName({}),
    };
  }

  LoadStaNameData() {
    let data = [];
    this.state.ps.then(res => {
      if (res.data.status == 200) {
        data = res.data.data
        // let result = []
        // console.log(22222, data)
        const dataSource1 = data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        dataSource1.unshift({label: "全部", value: ""})
        this.setState({
          dataSource1
        });

        // return data
      } else {
        alert("/api/getStaName, 接口出错")
      }
      // console.log(data)

    }).catch(err => {
      console.log(err)
      alert("/api/getStaName 接口出错" + err)
    });

    // console.log(data)

    // this.props.updateBindingData('RecvDevice');
  }


  LoadOuNameData() {
    let data = [];
    this.state.po.then(res => {
      if (res.data.status == 200) {
        data = res.data.data
        // let result = []
        // console.log(data)
        const dataSource = data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        dataSource.unshift({label: "全部", value: ""})
        this.setState({
          dataSource
        });

        // return data
      } else {
        alert("/api/getOuName, 接口出错")
      }
      // console.log(data)

    }).catch(err => {
      console.log(err)
      alert("/api/getOuName 接口出错" + err)
    });

    // console.log(data)

    // this.props.updateBindingData('RecvDevice');
  }

  componentWillMount() {
    this.LoadOuNameData()
    this.LoadStaNameData()
  }

  formChange = (value) => { //todo
    // console.log(value.ouName=="")
    // console.log(value.ouName)
    if (value.ouName != "") { // todo 不是点击全部
      // console.log('value', value);
      this.setState({
        ps: getStaName({
          ouName: [value.ouName],
        }),
      },function () { // 这里必须callback ，因为setstate 是异步
        this.LoadStaNameData()
      });
    }else{ // 是点击全部
      this.setState({
        ps: getStaName({
          ouName: [],
        }),
      },function () { // 这里必须callback ，因为setstate 是异步
        this.LoadStaNameData()
      });


    }

    this.props.filterData(value);
  };

  directCreateSta = () => {
    this.props.history.push('/station/add');
  }

  render() {
    // console.log(this.props.bindingData)
    // this.LoadDeviceData() // todo 由于绑定FormBinderWrappe，一直调用 render（）
    // const dataSource = this.state.devResult
    // todo 后台获取数据，生成 下拉菜单项
    // console.log(this.state.dataSource)

    return (
      <IceFormBinderWrapper  // todo 可能将下面表单的值，一起onchange，不需要单独
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="20" style={styles.formRow}>

          <Col l="10">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>机构名称：</span>
              <IceFormBinder triggerType="onBlur">
                <Select name="ouName" size="large" style={{width: '200px'}}
                        dataSource={this.state.dataSource}
                >
                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="type"/>
              </div>
            </div>
          </Col>

          <Col l="8">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>车站名称：</span>
              <IceFormBinder triggerType="onBlur">
                <Select name="staName" size="large" style={{width: '200px'}}
                        dataSource={this.state.dataSource1}
                >
                </Select>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="type"/>
              </div>
            </div>
          </Col>
          <Col l="6">
            <div style={styles.formItem}>
              <Button size="small" type="primary" onClick={
                () => this.directCreateSta()}>
                新建车站
              </Button>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formLabel: {
    minWidth: '70px',
  },
};
